<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>立即购买</title>
    <link rel="stylesheet" href="/fanli/style.min.css">
    <script src='/fanli/axios.js'></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="/fanli/jquey.js"></script>
</head>
<body>
    <main class="info-main">
        <h2>订单详情</h2>
        <div class="info-introduce">
            <div
                class="info-c-img"
                style="  background-image: url({{campinfo.cover}})"></div>
            <div class="info-right">
                <h4>{{campinfo.detailTitle?campinfo.detailTitle: '无一 合集分店分店开张，优惠多多哟！'}}</h4>
                <p> {{campinfo.detailDesc?campinfo.detailDesc: '武汉第一 家智能健身房登陆啦'}}</p>
            </div>
            <div class="info-price">
                <span>￥</span>
                <span id="price">{{campinfo.price}}</span>
            </div>
        </div>    
        <ul>
            <li class="info-item">
                <span class="title float-left">
                    数量
                </span>
                <span class="msg float-right">
                    <span id="reduce">&nbsp;-&nbsp;</span>
                    <input 
                        class="pay-number"
                        type="number" 
                        name="number"
                        value="1" 
                        min="1"
                        id="number"
                    >
                    <span id="add">&nbsp;+&nbsp;</span>
                </span>
            </li>
            <li class="info-item">
                <span class="title float-left">
                    小计
                </span>
                <span class="msg float-right" id="sum">￥{{campinfo.price}}</span>
            </li>
            <li class="info-item">
                <span class="title float-left">
                    电话
                </span>
                <span class="msg float-right" >
                    <input type="number" name="phone" id="phone">
                </span>
            </li>
        </ul>
        <button class="submit-btn" id="submit">立即支付</button>
    </main>

    <div class="pay-ok" id="pop" style="display:none;">
        <div class="play-ok-centent">
            <h3>支付成功</h3>
            <img src="/fanli/img/go.png" alt="">
            <p>每天锻炼一小时 &nbsp; 健康生活每一天</p>
            <a href="./user">
                <button class="color-fff">使用优惠价</button>
            </a>
            <a href="./index?st={{st}}">
                <button class="bg-fff color-111">返回首页</button>
            </a>
        </div>
    </div>
</body>
<script>
    (function(){
        var numberDom = document.querySelector('#number');
        var sumDom = document.querySelector('#sum');
        var addDom = document.querySelector('#add');
        var reduceDom = document.querySelector('#reduce');
        var priceDom = document.querySelector('#price');
        var submitDom = document.querySelector('#submit');
        var popDom = document.querySelector('#pop');
        var phone = document.querySelector('#phone');

        var info = {
            price:{{campinfo.price}},
            number:1
        };

        priceDom.innerHTML = info.price;
        sumDom.innerHTML =  '￥' + info.number *  info.price;

        numberDom.oninput = function(ev){
            info.number = Number(ev.target.value);
            if( info.number <= 1){
                info.number = 1;
            }
            sumDom.innerHTML =  '￥' + info.number *  info.price;
        };
        addDom.onclick = function(){
            info.number++;

            numberDom.value =  info.number;
            sumDom.innerHTML =  '￥' + info.number * info.price;
        };
        reduceDom.onclick = function(){
            info.number--;
            if( info.number <= 1){
                info.number = 1;
            }  
            numberDom.value =  info.number;
            sumDom.innerHTML =  '￥' + info.number * info.price;
        };

        submitDom.onclick = function(){
            var myreg =/^[1][3,4,5,7,8][0-9]{9}$/;
            if (!phone.value || !myreg.test(phone.value)) {
                alert('请填写有效的手机号')
            }
            $.ajax({
                type: 'post',
                url: 'prepay',
                data: {'num': info.number, 'st' : '{{st}}', 'phone': phone.value},
                dataType: 'json',
                success: function (res) {
                    if(res.code == 200) {
                        var pay_data = res.data.jsPayStr; //后端传过来的支付参数
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                                "appId":   pay_data.appId  ,     //公众号名称，由商户传入
                                "timeStamp":  pay_data.timeStamp  ,         //时间戳，自1970年以来的秒数
                                "nonceStr":  pay_data.nonceStr  , //随机串
                                "package":  pay_data.package  ,
                                "signType": pay_data.signType,         //微信签名方式:
                                "paySign":   pay_data.paySign  //微信签名
                            },
                            function (data) {
                                if (data.err_msg == "get_brand_wcpay_request:ok") {
                                    popDom.style.display = 'block';
                                    // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                                    return false;
                                } else if (data.err_msg == "get_brand_wcpay_request:cancel") {
                                    alert('取消支付?')
                                } else if (data.err_msg == "get_brand_wcpay_request:fail") {
                                    //支付失败
                                    alert('支付失败!')
                                } else {
                                    //其他错误
                                    alert('errorType', '其他错误:' + data.err_msg, 'delay');
                                }
                            }
                        );
                    } else {
                        alert(res.msg);
                    }
                },
                error: function (xhr, type) {
                    alert('Ajax error!');
                }
            })
        };
    /*    popDom.onclick = function(e){
            if(e.preventDefault){          
                e.preventDefault();
            }else{
                window.event.returnValue == false;
            }
            this.style.display = 'none';
        }*/
    })();

    wx.config({
        debug: false,
        appId: '{{wxjs_appid}}',
        timestamp: '{{wxjs_timestamp}}',
        nonceStr: '{{wxjs_noncestr}}',
        signature: '{{wxjs_signature}}',
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'onMenuShareQZone'
        ]
    });
    wx.ready(function () {
        wx.error(function (res) {
            console.log(res);
        });
        //朋友圈
        wx.onMenuShareTimeline({
            title: "{{campinfo.shareCircle}}", // 分享标题
            link:"{{host}}/weixin/fanli/index?st={{token}}", // 分享链接
            imgUrl: "{{campinfo.shareImage}}", // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数

            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

        //分享给朋友
        wx.onMenuShareAppMessage({
            title: "{{campinfo.shareTitle}}", // 分享标题
            desc: '{{campinfo.shareFriend}}', // 分享描述
            link:"{{host}}/weixin/fanli/index?st={{token}}", // 分享链接
            imgUrl: "{{campinfo.shareImage}}", // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
    });
</script>
</html>